<template>
	<view class="profile">
		<base-navbar back-color="#fff" title="我的"></base-navbar>
		<view class="user-header">
			<view class="user">
				<view class="user-info" v-if="checkLogin()">
					<image class="avatar" :src="memberInfo.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="name">{{memberInfo.nickname}}</view>
						<view class="desc">{{memberInfo.mobile}}</view>
					</view>
				</view>
				<view class="user-info" v-else>
					<image class="avatar" :src="web_host+'/static/images/default-avatar.png'" mode="aspectFill"></image>
					<view class="info">
						<view class="name" @click="pageRoute('/pages/users/login/login')">登录</view>
					</view>
				</view>

				<view class="actions">
					<!-- <view class="actions-item">
								<uni-icons type="scan" size="24"></uni-icons>
							</view> -->
					<view class="actions-item" @click="pageRoute('/pages/service/notice/notice-center')">
						<uni-badge class="uni-badge-left-margin" :text="noticeTotalNum" absolute="rightTop"
							:offset="[3, 3]">
							<uni-icons type="chatbubble" size="24"></uni-icons>
						</uni-badge>
					</view>
				</view>
			</view>

			<view class="main-grid">
				<view class="grid-item" @click="pageRoute('/pages/users/balance/balance')">
					<text class="value">{{balance_fee}}</text>
					<text class="label">余额</text>
				</view>
				<view class="grid-item" @click="pageRoute('/pages/users/commission/commission')">
					<text class="value">{{commission_fee}}</text>
					<text class="label">佣金</text>
				</view>
				<view class="grid-item" @click="pageRoute('/pages/users/point/point')">
					<text class="value">{{points}}</text>
					<text class="label">积分</text>
				</view>
				<view class="grid-item" @click="pageRoute('/pages/marketing/coupon/coupon')">
					<text class="value" v-if="couponNum>99">99+</text>
					<text class="value" v-else>{{couponNum}}</text>
					<text class="label">优惠卷</text>
				</view>
				<view class="grid-item" @click="pageRoute('/pages/users/spread-log/spread-log')">
					<text class="value" v-if="spreadNum>99">99+</text>
					<text class="value" v-else>{{spreadNum}}</text>
					<text class="label">我的推广</text>
				</view>
				<!-- <view class="grid-item" @click="pageRoute('/pages/users/collection/collection')">
					<text class="value" v-if="collectNum>99">99+</text>
					<text class="value" v-else>{{collectNum}}</text>
					<text class="label">收藏</text>
				</view> -->
				<!-- <view class="grid-item" @click="pageRoute('/pages/users/footprint/footprint')">
					<text class="value" v-if="footprintNum>99">99+</text>
					<text class="value" v-else>{{footprintNum}}</text>
					<text class="label">足迹</text>
				</view> -->
			</view>
		</view>

		<view class="content">
			<view class="card order">
				<view class="title">
					<text class="name">我的订单</text>
					<view class="more" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=0')">
						<text class="label">全部</text>
						<uni-icons type="right" color="#909399"></uni-icons>
					</view>
				</view>
				<view class="grid">
					<view class="grid-item-order" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=1')">
						<view class="icon-box">
							<uni-icons type="icon-daifukuan" custom-prefix="iconfont" size="32"
								:color="themeColor.theme"></uni-icons>
						</view>
						<view class="label">待付款</view>
					</view>
					<view class="grid-item-order" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=2')">
						<view class="icon-box">
							<uni-icons type="icon-daifahuo2" custom-prefix="iconfont" size="32"
								:color="themeColor.theme"></uni-icons>
						</view>
						<view class="label">待发货</view>
					</view>
					<view class="grid-item-order" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=3')">
						<view class="icon-box">
							<uni-icons type="icon-daishouhuo" custom-prefix="iconfont" size="32"
								:color="themeColor.theme"></uni-icons>
						</view>
						<view class="label">待收货</view>
					</view>
					<view class="grid-item-order" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=4')">
						<view class="icon-box">
							<uni-icons type="icon-daipingjia_1" custom-prefix="iconfont" size="32"
								:color="themeColor.theme"></uni-icons>
						</view>
						<view class="label">待评价</view>
					</view>
					<view class="grid-item-order" @click="pageTabRoute('/pages/tabbar/order/order?currentTab=5')">
						<view class="icon-box">
							<uni-icons type="icon-yiwancheng2" custom-prefix="iconfont" size="32"
								:color="themeColor.theme"></uni-icons>
						</view>
						<view class="label">已完成</view>
					</view>
				</view>
			</view>
			<view class="card pagination-menu">
				<view class="title">
					<text class="name">快捷功能</text>
				</view>
				<view class="menu-list">
					<!-- <view class="menu-item" @click="pageRoute('/pages/merchant/authenticate')"
						v-if="memberInfo.is_store==0">
						<uni-icons type="icon-shanghuruzhu" custom-prefix="iconfont" size="36"
							:color="themeColor.theme"></uni-icons>
						<view class="label">开通店铺</view>
					</view> -->
					<view class="menu-item" @click="pageRoute('/pages/merchant/assistant')"
						v-if="memberInfo.is_store==1">
						<uni-icons type="icon-qunfengshangjiazhushouapperweima" custom-prefix="iconfont" size="36"
							:color="themeColor.theme"></uni-icons>
						<view class="label">商家助手</view>
					</view>
					<!-- <view class="menu-item" @click="pageRoute('')">
						<uni-icons type="icon-leftbutton-fill" custom-prefix="iconfont" size="36"></uni-icons>
						<view class="label">核销订单</view>
					</view> -->
					<!-- <view class="menu-item" @click="pageRoute('')">
						<uni-icons type="icon-tuishuirongzi" custom-prefix="iconfont" size="36"></uni-icons>
						<view class="label">数据统计</view>
					</view> -->
					<view class="menu-item" v-for="(item, index) in menuList" :key="index"
						@click="pageRoute(item.link)">
						<image class="icon" :src="item.image" mode="aspectFill"></image>
						<view class="label">{{ item.name }}</view>
					</view>
				</view>
			</view>

			<view class="card tools">
				<view class="title">
					<text class="name">常用服务</text>
				</view>
				<c-cell>
					<c-cell-item name="收货地址" icon="location"
						@click="pageRoute('/pages/users/address/index')"></c-cell-item>
					<!-- <c-cell-item name="联系客服" icon="icon-kefu" custom-prefix="iconfont" :iconSize="18"
								@click="pageRoute('/pages/service/customer-service/index')"></c-cell-item> -->
					<c-cell-item name="联系客服" icon="icon-kefu" custom-prefix="iconfont" :iconSize="18"
						@click="openContact"></c-cell-item>
					<c-cell-item name="我的邀请码" icon="icon-tubiao_lianmeng-yaoqingma" custom-prefix="iconfont"
						:iconSize="18" @click="pageRoute('/pages/users/invitation-code/invitation-code')"></c-cell-item>
					<c-cell-item name="系统设置" icon="gear"
						@click="pageRoute('/pages/users/setting/setting')"></c-cell-item>
				</c-cell>
			</view>
		</view>

		<!-- 弹出层组件显示联系电话 -->
		<uni-popup ref="contactRef" background-color="#fff">
			<!-- 弹出层内容 -->
			<view class="popup-content">
				<!-- <text>这是弹出层内容</text> -->
				<view class="label">客服电话</view>
				<view class="item-phone">
					<text class="value">客服电话：{{kefu.service_tel}}</text>
					<text class="copy" @click="callPhone(kefu.service_tel)">拨打</text>
				</view>
				<view class="item-time">
					<text class="value">工作时间：{{kefu.service_time}}</text>
				</view>
			</view>
		</uni-popup>

		<!-- 弹出层组件绑定手机号 -->
		<uni-popup ref="bindMobileRef" :mask-click='false' type="center" mask-background-color="#544f5166">
			<view class="phone-popup">
				<!-- 头部 -->
				<view class="header">
					<view class="title">
						{{bindMobileMessage}}
					</view>
					<view class="close" @click="closePop">
						<uni-icons type="closeempty" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="mobile-content">
					<view class="form-item">
						<text class="label">手机号</text>
						<view class="form-input">
							<input v-model="form.mobile" type="text" placeholder="输入手机号" class="value" />
						</view>
					</view>
					<!-- <view class="form-item">
								<text class="label">验证码</text>
								<view class="form-input">
									<input v-model="form.verify_code" type="text" placeholder="验证码" class="value" />
									<text class="code" @tap="getVerifyCode">{{tips}}</text>
								</view>
							</view> -->
					<c-button type="error" round size="medium" block @click="setPhoneNumber">绑定</c-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const web_host = inject('web_host');

	let contactRef = ref(null);
	let bindMobileRef = ref(null);

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		memberInfo: {},
		balance_fee: 0,
		commission_fee: 0,
		points: 0,
		collectNum: 0,
		couponNum: 0,
		spreadNum: 0,
		footprintNum: 0,
		noticeTotalNum: 0,
		menuList: [],
		kefu: {
			mobile: '',
			business_time: ''
		},
		bindMobileMessage: '绑定手机号',
		form: {
			mobile: undefined,
			verify_code: undefined
		},
		tips: '获取验证码',
		countdown: 120, // 初始倒计时时间为60秒
		canGetCode: true, // 是否能获取验证码
		timer: null,
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		console.log('登录状态', checkLogin());
		console.log('会员信息', state.memberInfo);
		if (!checkLogin()) {
			// pageRoute('/pages/users/login/login');
			state.memberInfo = {};
		} else {
			getMemberInfo();
			getAmount();
			getMenuList();
			getKefuInfo();
			getNoticeTotalNum();
		}

		let isRefreshing = cache.get('isRefreshing');
		console.log('是否刷新', isRefreshing);
		if (isRefreshing) {
			cache.set('isRefreshing', false);
			window.location.reload();
		}
		console.log("主题色", state.themeColor);
	});

	onPullDownRefresh((e) => {
		console.log("下拉刷新", e);
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", e);
	});

	function getMemberInfo() {
		request.get('member/getMemberInfo').then(res => {
			console.log('会员信息', res);
			state.memberInfo = res.data;
			if (!res.data.is_mobile) {
				openBindMobile();
			}
		})
	}

	function getAmount() {
		request.get('member/getAmount').then(res => {
			console.log('数量', res);
			state.balance_fee = res.data.balance_fee;
			state.commission_fee = res.data.commission_fee;
			state.points = res.data.points;
			state.collectNum = res.data.collectNum;
			state.couponNum = res.data.couponNum;
			state.spreadNum = res.data.spreadNum;
			state.footprintNum = res.data.footprintNum;
		})
	}

	function getMenuList() {
		/* for (let i = 0; i <= 15; i++) {
			state.menuList.push({
				name: '菜单' + i,
				image: '',
				link: ''
			});
		} */
	}

	function openContact() {
		contactRef.value.open(); // 显示弹出层
	}

	function openBindMobile() {
		bindMobileRef.value.open(); // 显示弹出层
	}

	// 关闭弹窗
	function closePop() {
		bindMobileRef.value.close();
	}

	function getKefuInfo() {
		request.get('kefu/index').then(res => {
			console.log('客服', res);
			state.kefu = res.data;
		})
	}

	function getNoticeTotalNum() {
		request.get('content/getNoticeTotalNum').then(res => {
			console.log('未读消息', res);
			state.noticeTotalNum = res.data;
		})
	}

	// 获取手机验证码
	function getVerifyCode() {
		if (!state.form.mobile) {
			uni.showToast({
				title: '请输入手机号码',
				icon: "none"
			})
		} else {
			if (state.canGetCode) {
				// 向后端请求验证码
				state.canGetCode = false;
				uni.showLoading({
					title: '正在获取验证码'
				});
				request.post('common.sms/juheSend', {
					mobile: state.form.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						uni.showToast({
							title: '验证码已发送'
						})
						// 开始倒计时
						startCountdown();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				});
			} else {
				uni.showToast({
					title: '倒计时结束后再发送',
					icon: "none"
				})
			}
		}
	}

	function startCountdown() {
		if (state.timer) {
			return;
		}
		state.timer = setInterval(() => {
			if (state.countdown <= 0) {
				clearInterval(state.timer);
				state.countdown = 120;
				state.tips = '获取验证码';
				state.canGetCode = true;
				state.timer = null;
			} else {
				state.countdown -= 1;
				state.tips = state.countdown + ' S';
			}
		}, 1000);
	}

	// 绑定手机号
	function setPhoneNumber() {
		if (!state.form.mobile) {
			uni.showToast({
				title: '请输入手机号码',
				icon: "none"
			})
			return false;
		}
		updateMobile();
		/* if (!state.form.verify_code) {
			uni.showToast({
				title: '请输入验证码',
				icon: "none"
			})
			return false;
		}
		request.post('common.sms/checkcode', state.form).then(res => {
			if (res.code == 1) {
				updateMobile();
			} else {
				uni.showToast({
					title: res.msg,
					icon: "fail"
				})
			}
		}); */
	}

	function updateMobile() {
		request.post('member/setPhoneNumber', {
			mobile: state.form.mobile,
		}).then(res => {
			console.log('修改手机号', res);
			uni.showToast({
				title: res.msg,
			})
			getMemberInfo();
			closePop(); //关闭弹窗
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	};

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	};

	const {
		themeColor,
		memberInfo,
		balance_fee,
		commission_fee,
		points,
		collectNum,
		couponNum,
		spreadNum,
		footprintNum,
		noticeTotalNum,
		menuList,
		kefu,
		bindMobileMessage,
		form,
		tips,
		countdown,
		canGetCode,
	} = toRefs(state);
</script>

<style lang="scss">
	.profile {
		.user-header {
			padding: $margin-24 $margin-24;
			background: url('~@/static/images/bg-user-cover.jpg') no-repeat center / cover;

			.user {
				@include f-between;
				padding: $margin-24;

				.user-info {
					@include f-between;
					padding: $margin-24;

					.avatar {
						width: 110rpx;
						height: 110rpx;
						background-color: $bg-inverse-color;
						border-radius: $radius-circle;
					}

					.info {
						flex: 1;
						margin-left: $margin-24;

						.name {
							font-size: $font-32;
							color: $main-color;
							font-weight: bold;
						}

						.desc {
							margin-top: $margin-12;
							font-size: $font-24;
							color: $tips-color;
						}
					}
				}

				.actions {
					@include f-center;
					transform: translateX($margin-12);

					.actions-item {
						padding: 0 $margin-8;
					}
				}
			}

			.main-grid {
				display: flex;
				flex-wrap: wrap;
				padding: $margin-12 0;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;

				.grid-item {
					@include f-center($direction: column);
					// flex: 0 0 25%; //四列
					flex: 0 0 20%; //五列
					padding: $margin-12 0;

					.value {
						font-size: $font-32;
						color: $main-color;
						font-weight: bold;
					}

					.label {
						margin-top: $margin-12;
						font-size: $font-24;
						color: $tips-color;
					}
				}
			}
		}

		.content {
			position: relative;
			// margin-top: -128rpx;
			padding: 0 $margin-24 $margin-24;

			.card {
				overflow: hidden;
				margin-top: $margin-24;
				background-color: $bg-inverse-color;
				border-radius: $radius-12;

				.title {
					@include f-between;
					padding: $margin-24;

					.name {
						font-size: $font-32;
						color: $main-color;
						font-weight: bold;
					}

					.more {
						@include f-center;

						.label {
							font-size: $font-22;
							color: $tips-color;
						}
					}
				}

				&.order {
					.grid {
						display: flex;
						flex-wrap: wrap;
						padding: $margin-12 0;

						.grid-item-order {
							@include f-center($direction: column);
							flex: 0 0 20%;
							padding: $margin-12 0;

							.label {
								margin-top: $margin-12;
								font-size: $font-24;
							}
						}
					}
				}
			}

			.pagination-menu {
				position: relative;
				padding-bottom: 48rpx;

				.menu-list {
					display: flex;
					flex-wrap: wrap;
					padding: $margin-12 0;

					.menu-item {
						@include f-center($direction: column);
						flex: 0 0 25%;
						padding: $margin-12 0;

						.icon {
							width: 90rpx;
							height: 90rpx;
							border-radius: $radius-12;
							background-color: $bg-color;
						}

						.label {
							margin-top: $margin-12;
							font-size: $font-24;
							color: black;
						}
					}
				}

				.indicator-bar {
					position: absolute;
					bottom: $margin-24;
					left: 50%;
					transform: translateX(-50%);

					.bar-content {
						@include f-center;
						height: 12rpx;
						background-color: $bg-inverse-color;
						border-radius: $radius-half;

						.bar-item {
							width: 32rpx;
							height: 100%;
							opacity: 0;
							transition: all .1s;

							&.active {
								background-color: $warning-color;
								opacity: 1
							}
						}
					}
				}
			}
		}
	}

	.popup-content {
		width: 100%;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;

		.label {
			width: 100%;
			font-size: $font-48;
			text-align: center;
		}

		.item-phone {
			display: flex;
			width: 100%;
			align-items: center;
			padding: $margin-8 0;

			.value {
				flex: 1;
				margin-left: $margin-12;
				font-size: $font-32;
				color: $main-color;
				font-weight: 500;
			}

			.copy {
				font-size: $font-32;
				color: $error-color;
			}
		}

		.item-time {
			align-items: center;
			padding: $margin-8 0;

			.value {
				margin-left: $margin-12;
				font-size: $font-32;
				color: $main-color;
				font-weight: 500;
				text-align: center;
			}
		}
	}

	.phone-popup {
		background-color: #ffffff;
		padding: 30rpx 40rpx;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;

		.header {
			height: 50rxp;
			padding: 15rpx;
			position: relative;

			display: flex;
			flex-direction: row;
			// border-bottom: 1px solid #aaa;
			align-items: center;
			justify-content: center;

			.title {}

			.close {
				position: absolute;
				right: 5rpx;
				// top:5rpx;
				// padding: 2rpx;
				border: 1px solid #999999;
				border-radius: 30rpx;
			}
		}

		.mobile-content {
			.form-item {
				@include f-between;
				padding: $margin-24 0;
				border-bottom: 1rpx solid mix($white-color, $border-color, 35%);

				.label {
					width: 120rpx;
				}

				.form-input {
					@include f-between;
					flex: 1;

					.value {
						flex: 1;
						padding: 0 $margin-12;
					}

					.code {
						font-size: $font-24;
						color: $success-color;
					}
				}
			}

			:deep(.c-button) {
				margin-top: $margin-24;
			}
		}
	}

	.close {
		width: 34rpx;
		height: 34rpx;
		text-align: center;
	}
</style>